<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">获取数据按钮</button>
<span id="rst"></span>

<script>
    let oBtn = document.getElementById('btn');
    let oRst = document.getElementById('rst');
    oBtn.onclick = () => {
        //then方法接收两个函数块，第一个函数块传送到promise的resolve，代表成功，第二个函数块传送到promise的reject，代表失败
        AsyncGetData().then( (data) => {
            oRst.innerHTML = data;
        }, (data) => {
            oRst.innerHTML = '<span style="color: crimson">'+ data+'</span>';
        });
    };
    
    function AsyncGetData() {
        let num = Math.random() * 20;
        let p = new Promise( (resolve, reject) => {
            setTimeout( () => {
                if (num > 10){
                    resolve('已经获取到随机数!!');
                } else {
                    reject('获取随机数失败！！');
                }
            },1000);
        });
        return p;
    }




</script>

</body>
</html>